<template>
  <el-drawer
  :title="drawerTitle"
  :visible.sync="drawerVisible"
  direction="rtl"
  :before-close="cancelAudit">
    <el-form
    :model="databaseForm"
    ref="databaseForm"
    :rules="rules"
    label-width="100px">
      <el-form-item label="类型:" prop="databaseType">
        <el-select v-model="databaseForm.databaseType" placeholder="请选择" style="width: 100%;" @change="databaseTypeChange">
          <el-option
          v-for="(item, index) in $config.DATABASE_TYPE"
          :key="Number(index)"
          :label="item"
          :value="Number(index)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="协议:" prop="protocol">
        <el-input v-model="databaseForm.protocol" placeholder="请输入协议" @change="formChange"></el-input>
      </el-form-item>
      <el-form-item label="域名:" prop="domain">
        <el-input v-model="databaseForm.domain" placeholder="请输入域名" @change="formChange"></el-input>
      </el-form-item>
      <el-form-item label="端口:" prop="port">
        <el-input v-model="databaseForm.port" placeholder="请输入端口" @change="formChange"></el-input>
      </el-form-item>
      <el-form-item label="库名:" prop="databaseName">
        <el-input v-model="databaseForm.databaseName" placeholder="请输入资源库名" @change="formChange">
          <template slot="prepend">
            wltx_merchants_
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="扩展:">
        <el-input v-model="databaseForm.extendCfg" placeholder="请输入资源访问扩展配置" @change="formChange"></el-input>
      </el-form-item>
      <el-form-item label="账号:" prop="username">
        <el-input v-model="databaseForm.username" placeholder="请输入账号" @change="formChange"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input type="password" v-model="databaseForm.password" @change="formChange" placeholder="请输入密码" show-password suffix-icon="el-icon-lock"/>
      </el-form-item>
      <el-form-item label="地址:">
        <el-input type="textarea" rows="2" readonly v-model="databaseForm.linkUrl" placeholder="请输入资源访问地址"></el-input>
      </el-form-item>
    </el-form>
    <div class="database-footer-toolbar">
      <el-button type="default" @click="cancelAudit">取消</el-button>
      <el-button type="primary" @click="okSubmit">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import { databaseAdd, databaseEdit, databaseDetail } from '@/api/database'

export default {
  name: 'DatabaseAddEdit',
  props: {
    title: {
      type: String,
      default: ()=> '新增'
    },
    visible: {
      type: Boolean,
      default: ()=> false
    },
    rowId: {
      type: Number,
      default: ()=> null
    },
    formId: {
      type: Number,
      default: ()=> null
    },
    grid: {
      type: Object,
      default: ()=> null
    },
    refreshGrid: {
      type: Function,
      default: ()=> null
    }
  },
  data() {
    return {
      databaseForm: null,
      initForm:{
        id: null,
        merchantsId: void 0,
        databaseType: 1,
        username: '',
        password: '',
        protocol: 'jdbc:mysql://',
        domain: '',
        port: 3306,
        databaseName: '',
        name: '',
        extendCfg: '',
        linkUrl: ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur, change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur, change' }],
        protocol: [{ required: true, message: '请输入协议', trigger: 'blur, change' }],
        domain: [{ required: true, message: '请输入域名', trigger: 'blur, change' }],
        port: [{ required: true, message: '请输入端口', trigger: 'blur, change' }],
        databaseName: [{ required: true, message: '请输入资源库名称', trigger: 'blur, change' }]
      }
    }
  },
  computed: {
    drawerTitle: {
      get() {
        return this.title
      }
    },

    drawerVisible: {
      get(){
        return this.visible
      }
    }
  },
  watch: {
    rowId: {
      handler(val) {
        if(!val) return
        this.loadDatabaseDetail(val)
      }
    }
  },
  created(){
    this.databaseForm = { ...this.initForm }
  },
  methods: {
    // 加载详情
    async loadDatabaseDetail(rowId) {
      const res = await databaseDetail(rowId)
      this.databaseForm = { ...res.data }
    },

    // 关闭
    handleClose() {
      this.databaseForm = { ...this.initForm }
      this.$refs.databaseForm.resetFields()
      this.$emit('update:visible', false)
      this.$emit('update:rowId', null)
    },

    // 资源类型发生变化
    databaseTypeChange() {
      this.databaseForm.protocol = ''
      this.databaseForm.port = null
      this.databaseForm.linkUrl = ''
    },

    // 表单值发生变化
    formChange() {
      if(this.databaseForm.databaseName) {
        this.databaseForm.name = `wltx_merchants_${this.databaseForm.databaseName}`
      }
      this.databaseForm.linkUrl = (`${this.databaseForm.protocol
      }${this.databaseForm.domain}:${this.databaseForm.port}/${this.databaseForm.name}`).concat(this.databaseForm.extendCfg? `?${this.databaseForm.extendCfg}`: '')
    },

    // 取消提交
    cancelAudit() {
      this.$confirm('确定取消当前页面修改的数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async ()=> {
          this.handleClose()
        }).catch(()=> {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },

    // 确定提交
    okSubmit() {
      this.$refs.databaseForm.validate((valid)=> {
        if(!valid) return
        this.$confirm('确定提交当前页面修改的数据？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async ()=> {
          if(!this.databaseForm.id) {
            this.databaseForm.merchantsId = this.formId
            await databaseAdd({ ...this.databaseForm })
            this.refreshGrid(this.grid)
            this.handleClose()
          }else {
            await databaseEdit({ ...this.databaseForm })
            this.refreshGrid(this.grid)
            this.handleClose()
          }
        }).catch(()=> {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form {
  width: 90%;
}

.database-footer-toolbar {
  width: 100%;
  margin-top: 25%;
  padding-left: 30px;

  .el-button {
    margin-right: 10px;
  }
}
</style>